<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入值获取与显示</title>
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> -->
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: darkblue;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            width: 100%;
            max-width: 500px;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            animation: fadeIn 0.8s ease-out;
        }
        
        .header {
            background: linear-gradient(90deg, #4776E6, #8E54E9);
            color: white;
            padding: 25px 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .header p {
            opacity: 0.9;
            font-size: 1rem;
        }
        
        .content {
            padding: 30px;
        }
        
        .input-group {
            margin-bottom: 25px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #333;
            font-size: 1.1rem;
        }
        
        input {
            width: 100%;
            padding: 15px;
            border: 2px solid #ddd;
            border-radius: 12px;
            font-size: 1.1rem;
            transition: all 0.3s;
        }
        
        input:focus {
            border-color: #4776E6;
            box-shadow: 0 0 0 3px rgba(71, 118, 230, 0.2);
            outline: none;
        }
        
        input::placeholder {
            color: #aaa;
        }
        
        .btn {
            background: linear-gradient(90deg, #4776E6, #8E54E9);
            color: white;
            border: none;
            padding: 15px 25px;
            font-size: 1.1rem;
            border-radius: 12px;
            cursor: pointer;
            width: 100%;
            font-weight: 600;
            letter-spacing: 0.5px;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(71, 118, 230, 0.3);
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 7px 20px rgba(71, 118, 230, 0.4);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .result-container {
            margin-top: 30px;
            background: #f8f9ff;
            border-radius: 12px;
            padding: 20px;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dashed #ddd;
            transition: all 0.4s;
        }
        
        .result {
            text-align: center;
            font-size: 1.3rem;
            color: #333;
            font-weight: 500;
        }
        
        .hidden {
            opacity: 0;
            transform: translateY(10px);
        }
        
        .visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .icon {
            font-size: 2.5rem;
            color: #4776E6;
            margin-bottom: 15px;
        }
        
        .instructions {
            background: #eef4ff;
            border-radius: 12px;
            padding: 20px;
            margin-top: 25px;
            font-size: 0.95rem;
            color: #555;
        }
        
        .instructions h3 {
            color: #4776E6;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .instructions ul {
            padding-left: 20px;
        }
        
        .instructions li {
            margin-bottom: 8px;
            line-height: 1.5;
        }
        
        .footer {
            text-align: center;
            padding: 20px;
            color: #777;
            font-size: 0.9rem;
            border-top: 1px solid #eee;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @media (max-width: 600px) {
            .container {
                max-width: 100%;
            }
            
            .content {
                padding: 20px;
            }
            
            .header {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1><i class="fas fa-keyboard"></i> 输入值获取与显示</h1>
            <p>在输入框中输入内容，点击按钮显示结果</p>
        </div>
        
        <div class="content">
            <div class="input-group">
                <label for="yonghuming"><i class="fas fa-user"></i> 用户名：</label>
                <input type="text" placeholder="请输入用户名" name="yonghuming" id="yonghuming">
				
				<label for="mima"><i class="fas fa-user"></i> 密码：</label>
				<input type="text" placeholder="请输入密码" name="mima" id="mima">
            </div>
            
            <button id="submitBtn" class="btn">
                <i class="fas fa-paper-plane"></i> 提交并显示输入内容
            </button>
            
            <div class="result-container hidden" id="resultContainer">
                <div class="result" id="result">
                    <div class="icon">
                        <i class="fas fa-comment-alt"></i>
                    </div>
                    <div>您输入的内容将显示在这里</div>
                </div>
            </div>
            
            <div class="instructions">
                <h3><i class="fas fa-info-circle"></i> 使用说明</h3>
                <ul>
                    <li>在文本框中输入任意内容</li>
                    <li>点击"提交并显示输入内容"按钮</li>
                    <li>您输入的内容将显示在下方区域</li>
                    <li>此功能使用JavaScript的DOM操作实现</li>
                    <li>代码通过getElementById获取元素</li>
                </ul>
            </div>
        </div>
        
        <div class="footer">
            <p>© 2023 输入值获取示例 | 前端开发实践</p>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const inputField = document.getElementById('yonghuming');
			const inputMiMaField = document.getElementById('mima');
            const submitBtn = document.getElementById('submitBtn');
            const resultContainer = document.getElementById('resultContainer');
            const resultText = document.getElementById('result').querySelector('div:last-child');
            
            submitBtn.addEventListener('click', function() {
                const inputValue = inputField.value.trim();
				const inputMiMaValue = inputMiMaField.value.trim();
                
                if (inputValue === '' || inputMiMaValue === '') {
                    resultText.textContent = '请输入内容后再提交！';
                    resultText.style.color = '#e74c3c';
                } else {
					if(inputValue === 'admin' && inputMiMaValue === '123456') {
						resultText.textContent = `登录成功！您输入的用户名是: ${inputValue},密码是：${inputMiMaValue}`;
						resultText.style.color = '#333';
					} else {
						resultText.textContent = `登录失败！您输入的用户名是: ${inputValue},密码是：${inputMiMaValue}`;
						resultText.style.color = '#333';
					}
                    
                }
                
                // 显示结果区域并添加动画
                resultContainer.classList.remove('hidden');
                setTimeout(() => {
                    resultContainer.classList.add('visible');
                }, 10);
            });
            
            // 输入框获得焦点时清空提示
            inputField.addEventListener('focus', function() {
                if (this.value === '') {
                    resultContainer.classList.remove('visible');
                    setTimeout(() => {
                        resultContainer.classList.add('hidden');
                    }, 300);
                }
            });
        });
    </script>
</body>
</html>